<template>
	<view class="total">
		<view class="order-info" v-for="(item, index) in orderList" :key="item.id" >
			<view class="title" @click="toDetailHandle(item.id)">
				<text class="method">{{methodToString(item.method)}}</text>
				<text class="shop">{{item.shop}} ></text>
				<text class="status">{{statusToString(item.status)}}</text>
			</view>

			<view class="img" @click="toDetailHandle(item.id)">
				<image v-if="item.shoppingCartVoList!=null && item.shoppingCartVoList.length!=0 && index<4" class="image" v-for="(i,index) in item.shoppingCartVoList" :src="i.imgUrl" >
				<!-- <image v-else src="../../../static/Fig.png" class="image"></image> -->
			</view>
			<view class="content" @click="toDetailHandle(item.id)">
				<text class="time">{{item.time}}</text>
				<text class="goodNum">共{{item.goodNum}}件</text>
				<text class="amount">￥{{item.amount}}</text>
			</view>
			<view class="anothor">
				<button class="btnOne" @click="gotoOrder">再来一单</button>
			</view>
		</view>
	</view>
</template>

<script>


	export default{
		props:{
			orderList:{
				type:Array,
				default:()=>[]
			}
			// pageInfo: Number
		},
		watch: {
			orderList(newPage){
				// console.log(newPage)
				// this.pageId = newPage
				// this.getAllOrders()
			}
		},
		data(){
			return{
				pageId: null,
				method: "自提",  // 取餐方式（0：自取， 1：外送）
				shop: "蜜雪冰城(浙江农林C6店)", // 门店
				status: "已完成",  // 订单状态 0：制作中，1：已完成
				goodsImg: "../../../static/Fig.png", // 商品图片
				time: "2023-10-20 17:05:02",  // 订单时间
				goodNum: "1", // 商品数量
				amount: "7.99",  // 总金额
				orderInfo: null,
				testList: [
					{
						method: "自提",  // 取餐方式（0：自取， 1：外送）
						shop: "蜜雪冰城(浙江农林C6店)", // 门店
						status: "已完成",  // 订单状态 0：制作中，1：已完成
						goodsImg: "../../../static/Fig.png", // 商品图片
						time: "2023-10-20 17:05:02",  // 订单时间
						goodNum: "1", // 商品数量
						amount: "7.99",  // 总金额
					},
					{
						method: "自提",  // 取餐方式（0：自取， 1：外送）
						shop: "蜜雪冰城(浙江农林C6店)", // 门店
						status: "已完成",  // 订单状态 0：制作中，1：已完成
						goodsImg: "../../../static/Fig.png", // 商品图片
						time: "2023-10-20 17:05:02",  // 订单时间
						goodNum: "1", // 商品数量
						amount: "7.99",  // 总金额
					},
					{
						method: "自提",  // 取餐方式（0：自取， 1：外送）
						shop: "蜜雪冰城(浙江农林C6店)", // 门店
						status: "已完成",  // 订单状态 0：制作中，1：已完成
						goodsImg: "../../../static/Fig.png", // 商品图片
						time: "2023-10-20 17:05:02",  // 订单时间
						goodNum: "1", // 商品数量
						amount: "7.99",  // 总金额
					},
				]
			}
		},
		mounted() {
			// this.getAllOrders();
			// console.log(this.pageInfo)
			// this.pageId = this.orderInfo
		},
		onLoad(options) {
			// this.getAllOrders();
			console.log(this.orderList)
		},

		methods: {

			// 跳转至订单详情页面
			toDetailHandle(id){
				//console.log(this.orderInfo)
				uni.navigateTo({
					url: `/pages/form/orderDetail?id=${id}`
				})
			},

			gotoOrder(){
				uni.switchTab({
					url: '/pages/newoder/newoder'
				})
			},

			// 函数功能：判定 method 返回的值，0：自取，1：外送
			methodToString(a){
				if(a == 0) return "自取";
				return "外送";
			},

			// 函数功能：判定 status 返回的值：0：制作中，1：已完成
			statusToString(a){
				if(a == 0) return "制作中";
				else if (a == -1) return "退单";
				return "已完成";
			},


			// 获取所有订单信息
			// getAllOrders() {
			//   uni.request({
			//       url:`http://127.0.0.1:8080/mixuebingcheng/test/queryByStatus?status=${this.pageInfo}`,
			//       success: (res) => {
			//           // console.log(res);
			// 		  // console.log(orderInfo);
			// 		  this.setData({
			// 		      orderInfo: res.data
			// 		  });
			// 		  // console.log(this.orderInfo);
			//       }
			//   });
			// },
		},
	}
</script>

<style>
	.total{
		padding-top: 5px;
		padding-bottom: 5px;

		/* display: flex; */
		height: 100%;
		background-color: #F5F5F5;
		/* padding-bottom: 30px; */
		/* padding-bottom: 100%; */
	}
	.order-info{
		padding-bottom: 5px;
		padding-top: 5px;
		height: 160px;
		/* width: 100%; */
		margin-top: 5px;
		margin-bottom: 5px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
	.image{
		width: 60px;
		height: 60px;
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: aqua;
	}
	.content{
		display: flex;
		margin-left: 10px;
		/* background-color: aqua; */
		margin-bottom: 5px;
	}
	.time{
		flex: 6;
		color: #CCCCCC;
		font-size: 7px;
	}
	.goodNum{
		flex: 1;
		/* margin-left: 100px; */
		color: #CCCCCC;
		font-size: 8px;
		text-align: right;
		/* background-color: aquamarine; */
		padding-top: 2px;
	}
	.amount{
		flex: 1;
		margin-left: 5px;
		font-size: 10px;
		text-align: left;
	}
	
	.title{
		/* background-color: aquamarine; */
		margin-top: 10px;
		margin-left: 5px;
		display: flex;
	}
	
	.method{
		padding-top: 1px;
		flex: 1;
		background-color: rgba(255, 0, 0, 0.1);
		color: red;
		border-radius: 7px;
		font-size: 10px;
		margin-left: 5px;
		margin-right: 5px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 10px;
		text-align: center;
	}
	.shop{
		flex: 7;
		
		font-size: 13px;
		/* background-color: aquamarine; */
	}
	.status{
		flex: 2;
		margin-right: 10px;
		color: #CCCCCC;
		text-align: center;
		/* background-color: aqua; */
	}
	.btnOne{
		margin-right: 10px;
		width: 70px;
		height: 26px;
		font-size: 10px;
		color: red;
		border: 2px solid red;
		background-color: #FFFFFF;
		padding-bottom: 1px;
		padding-right: 4px;
		padding-left: 2px;
	}
</style>
